<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../css/homepage.css" />
	<link rel="stylesheet" type="text/css" href="../css/normal.css"/>
	<body>
		<header>
			<div id="logo">
				<img src="">
			</div>
			<div id="container">
				<ul>
					<li><a href="">在线商城</a></li>
					<li><a href="">坚果R2</a></li>
					<li><a href="">Smartisan TNT go</a></li>
					<li><a href="">坚果 TNT工作站</a></li>
					<li><a href="">Smartisan OS</a></li>
					<li><a href="">欢喜云</a></li>
					<li><a href="">论坛</a></li>
					<li><a href="">开发者支持</a></li>
					<li><a href="">荣誉与奖项</a></li>
				</ul>
			</div>
			<div id="aside">
				<div id="position-head">
					<a></a>
				</div>
				<div id="position-aside">
					<a></a>                                                                                     
				</div>
			</div>
		</header>
		<main>
			<div id="main-title">
				<ul id="index-fir">
					<li><a href="http://localhost/project/hammer/homepage.html">首页</a></li>
					<li><a href="son-one.html">坚果手机</a></li>
					<li><a href="">TNT</a></li>
					<li><a href="son-two.html">官方自营</a></li>
					<li><a href="">服务</a></li>
				</ul>
				<div id="search">
					<div id="form">
						<button type="button" id="submit-btn"></button>
						<input type="" name="" id="search-text" value="" placeholder=""/>
					</div>
					<div id="recommends">
						<a href="https://www.smartisan.com/item/100162801" class="recommend">坚果 R2</a>
						<a href="https://www.smartisan.com/item/100187101" class="recommend" >TNT</a>
					</div>
				</div>
				<div id="main-stiky">
					<div id="stiky-head">
						<a href="record.html"></a>
					</div>
					<div id="stiky-aside">
						<a href=""></a>
					</div>
				</div>
			</div>
			<div id="nav-select">
				<div id="nav-center">
					<div id="nav-left">
						<div id="phones">手机</div>
						<ul id="nav-phone">
							<li>
								<a href=""><img
										src="https://resource.smartisan.com/resource/a4c73e549097c7f5cf2c5e0d87e56d13.png?x-oss-process=image/resize,w_50/format,webp"
										id="picture">

									<span id="phone-span-1">
										手机
									</span>
								</a>
							</li>
						</ul>
					</div>
					<div id="nav-right">
						<div id="official">官方配件</div>
						<ul id="nav-u">
							<li><a href=""><img src="../img/4.webp" id="picture" id="picture">蓝牙耳机</a></li>
							<li><a href=""><img src="../img/4数据线.webp" id="picture">数据线</a></li>
							<li><a href=""><img src="../img/4.充电器.webp" id="picture">充电器</a></li>
							<li><a href=""><img src="../img/4移动电源.webp" id="picture">移动电源</a></li>

						</ul>
						<div id="nav-rig">
							<ul>
								<li><a href=""><img src="../img/4.拍照配件.webp" id="picture">拍照配件</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div id="nav-select-two"></div>
			<div id="nav-select-three">
				<div id="nav-three-center">
					<ul id="nav-three-ul">
						<li>
							<a href="">
								<div id="nav-flex-one">
						<img src="../img/5.保修.png" id="picture">
						<div id="nav-flex-two">保修服务</div>
								</div>
							</a>
						</li>
						<li>
							<a href="">
								<div id="nav-flex-one">
						<img src="../img/5.在线客服.png" id="picture">
						<div id="nav-flex-two">在线客服</div>
								</div>
							</a>
						</li>
						<li>
							<a href="">
								<div id="nav-flex-one">
						<img src="../img/5.服务政策.png" id="picture">
						<div id="nav-flex-two">服务政策</div>
								</div>
							</a>
						</li>
						<li>
							<a href="">
								<div id="nav-flex-one">
						<img src="../img/5.发起售后.png" id="picture">
						<div id="nav-flex-two">发起售后</div>
								</div>
							</a>
						</li>
						<li>
							<a href="">
								<div id="nav-flex-one">
						<img src="../img/5.维修门店.png" id="picture">
						<div id="nav-flex-two">维修门店</div>
								</div>
							</a>
						</li>
						<li>
							<a href="">
								<div id="nav-flex-one">
						<img src="../img/5.自助服务.png" id="picture">
						<div id="nav-flex-two">自助服务</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div id="nav-select-four">
				<ul>
					<li id="nut"><a href="" id="nut-a">坚果R2</a></li>
					<li id="nut"><a href="" id="nut-b">蓝牙耳机</a></li>
					<li id="nut"><a href="" id="nut-c">TNT</a></li>
					<li id="nut"><a href="" id="nut-d">移动电源</a></li>
					<li id="nut"><a href="" id="nut-e">坚果快充</a></li>
					<li id="nut"><a href="" id="nut-f">坚果R2保护套</a></li>
				</ul>
				<div id="delta"></div>
			</div>
			<div id="nav-select-five">
				<div id="nav-pic-1">
				<p id="shop-big">
					购物车为空
				</p>
				<p id="shop-small">
					您还没有选购任何商品，现在区商城选购吧!
				</p>
				</div>
			</div>
		</main>
		<section>
			<div id="banner">
				<div id="banner-first">
						<ul>
							<li id="chart"></li>
							<li id="chart"></li>
							<li id="chart"></li>
						</ul>
					</div>
				</div>
			</div>
			</div>
			<div id="section-big-one">
				<figure>
					<img src="../img/3-1.坚果发布.webp">
					<a href="" id="gg"></a>
				</figure>
				<figure>
					<img src="../img/3-2.教育专区.webp" >
					<a href="" id="gg"></a>
				</figure>
				<figure>
					<img src="../img/3-3.webp" >
					<a href="" id="gg"></a>
				</figure>
				<figure>
					<img src="../img/3-4.webp" >
					<a href="" id="gg"></a>
				</figure>
			</div>
			<div id="section-big-two">
				<header>
					<h5>热门商品</h5>
					<aside id="big-two-btn">
						<button id="btn-left"></button>
						<button id="btn-right"></button>
					</aside>
				</header>
				<aside id="section-two-box">
					<!-- <section id="section-small-one">
						<figure >
							<img src="../img/6-1.webp" >
						</figure>
						<article>
							<h3>坚果 R2</h3>
							<h5>是下一代手机，更是下一代电脑</h5>
						</article>
						<article id="small-one-price"><span>￥2,699.00</span></article>
					</section>
					<section id="section-small-one">
						<figure >
							<img src="../img/6-2.webp" >
						</figure>
						<article>
							<h3>Smartisan TNT 大满足套装</h3>
							<h5>下一代手机，下一代电脑</h5>
						</article>
						<article id="small-one-price"><span>￥4,999.00</span></article>
					</section>
					<section id="section-small-one">
						<figure >
							<img src="../img/6-3.webp" >
						</figure>
						<article>
							<h3 id="id-three">Smartisan 真无线蓝牙耳机（抖音文创限量款）</h3>
							<h5>抖音文创限量版</h5>
						</article>
						<article id="small-one-price"><span>￥299.00</span></article>
					</section>
					<section id="section-small-one">
						<figure >
							<img src="../img/6-4.webp" >
						</figure>
						<article>
							<h3>Smartisan 真无线TWS蓝牙耳机</h3>
							<h5>智能配对 开盖即连</h5>
						</article>
						<article id="small-one-price"><span>￥99.00</span></article>
					</section> -->
				</aside>
			</div>
			<div id="section-big-three">
				<div id="section-equal">
					<header>
						<h5>坚果 R2 及配件</h5>
					</header>
					<aside id="section-three-first" class="section-qq">
						<article id="section-three-first-big" class="section-ww">
							<img src="../img/7-1.webp" >
							<a href=""></a>
						</article>
						 <section id="section-small-one">
							<figure >
								<img src="../img/6-5.webp" >
							</figure>
							<article>
								<h3>坚果 R2</h3>
								<h5>是下一代手机，更是下一代电脑</h5>
							</article>
							<article id="small-one-price"><span>￥2,699.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/6-1.webp" >
							</figure>
							<article>
								<h3>坚果 R2</h3>
								<h5>是下一代手机，更是下一代电脑</h5>
							</article>
							<article id="small-one-price"><span>￥2,699.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/6-6.webp" >
							</figure>
							<article>
								<h3>坚果 R2</h3>
								<h5>是下一代手机，更是下一代电脑</h5>
							</article>
							<article id="small-one-price"><span>￥4,999.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/6-7.webp" >
							</figure>
							<article>
								<h3>坚果 R2 足迹系列保护套</h3>
								<h5>7种主题随机发货</h5>
							</article>
							<article id="small-one-price"><span>￥59.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/6-8.webp" >
							</figure>
							<article>
								<h3 id="id-three">坚果 R2 足迹系列保护套 3M 开始销售透明胶带</h3>
								<h5>为了那些改变人类足迹的进程</h5>
							</article>
							<article id="small-one-price"><span>￥59.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/6-9.webp" >
							</figure>
							<article>
								<h3 id="id-three">坚果 R2 足迹系列保护套 圆珠笔的改进者出生</h3>
								<h5>为了那些改变人类足迹的进程</h5>
							</article>
							<article id="small-one-price"><span>￥59.00</span></article>
						</section>
					</aside>
				</div>
			</div>
			<div id="section-big-four">
				<div id="section-equal">
					<header>
						<h5>Smartisan TNT</h5>
					</header>
					<aside id="section-three-first">
						<figure id="section-three-first-big">
							<img src="../img/8-1.webp" >
							<a href=""></a>
						</figure>
						<section id="section-small-one">
							<figure >
								<img src="../img/6-2.webp" >
							</figure>
							<article>
								<h3>Smartisan TNT 大满足套装</h3>
								<h5>下一代手机，下一代电脑</h5>
							</article>
							<article id="small-one-price"><span>￥4,999.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/8-2.webp" >
							</figure>
							<article>
								<h3>Smartisan TNT 大满足套装</h3>
								<h5>下一代手机，下一代电脑</h5>
							</article>
							<article id="small-one-price"><span>￥5,699.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/8-3.webp" >
							</figure>
							<article>
								<h3>Smartisan TNT go</h3>
								<h5>欢迎使用下一代电脑</h5>
							</article>
							<article id="small-one-price"><span>￥1,499.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/8-4.webp" >
							</figure>
							<article>
								<h3>Smartisan TNT go</h3>
								<h5>欢迎使用下一代电脑</h5>
							</article>
							<article id="small-one-price"><span>￥1,999.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/8-5.webp" >
							</figure>
							<article>
								<h3>Smartisan 智能手写笔</h3>
								<h5>尽情挥洒创造力</h5>
							</article>
							<article id="small-one-price"><span>￥499.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/8-6.webp" >
							</figure>
							<article>
								<h3>Smartisan 手机立式扩展坞</h3>
								<h5>连屏幕，连外设，手机拓展一步到位</h5>
							</article>
							<article id="small-one-price"><span>￥299.00</span></article>
						</section>
					</aside>
				</div>
			</div>
			<div id="section-big-five">
				<div id="section-equal">
					<header>
						<h5>官方精选配件</h5>
						<div id="section-big-five-div">
							<a href="" id="active">官方精选配件</a>
							<a href="https://www.smartisan.com/category/185?type=shop" id="zero"></a>
							<a href="https://www.smartisan.com/category/185?type=shop" id="floor-link">更多推荐</a>
						</div>
					</header>
					<aside id="section-three-first">
						<figure id="section-three-first-big">
							<img src="../img/9-1.webp" >
							<a href=""></a>
						</figure>
						<section id="section-small-one">
							<figure >
								<img src="../img/6-3.webp" >
							</figure>
							<article>
								<h3 id="id-three">Smartisan 真无线蓝牙耳机（抖音文创限量款）2</h3>
								<h5>抖音文创限量版</h5>
							</article>
							<article id="small-one-price"><span>￥299.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/9-2.webp" >
							</figure>
							<article>
								<h3>Smartisan 手机支架</h3>
								<h5>立得住，放的稳</h5>
							</article>
							<article id="small-one-price"><span>￥39.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/9-3.webp" >
							</figure>
							<article>
								<h3>坚果彩虹数据线</h3>
								<h5>七彩配色随机发货，为生活增添一份小小惊喜</h5>
							</article>
							<article id="small-one-price"><span>￥19.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/9-4.webp" >
							</figure>
							<article>
								<h3>Smartisan  颈挂蓝牙耳机</h3>
								<h5>“圈铁一体代表作”</h5>
							</article>
							<article id="small-one-price"><span>￥199.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/9-5.webp" >
							</figure>
							<article>
								<h3 id="id-three">Smartisan 多功能数据线（USB 3.2 Gen 2）</h3>
								<h5>高清投屏，高速传输</h5>
							</article>
							<article id="small-one-price"><span>￥59.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/9-6.webp" >
							</figure>
							<article>
								<h3>Smartisan 真无线蓝牙耳机 Pro</h3>
								<h5>通话降噪 全新升级</h5>
							</article>
							<article id="small-one-price"><span>￥59.00</span></article>
						</section>
					</aside>
				</div>
			</div>
			<div id="section-big-six">
				<div id="section-equal">
					<header>
						<h5>足迹系列保护套</h5>
					</header>
					<aside id="section-three-first">
						<figure id="section-three-first-big">
							<img src="../img/10-1.webp" >
							<a href=""></a>
						</figure>
						<section id="section-small-one">
							<figure >
								<img src="../img/6-7.webp" >
							</figure>
							<article>
								<h3>坚果 R2 足迹系列保护套</h3>
								<h5>7种主题随机发货</h5>
							</article>
							<article id="small-one-price"><span>￥59.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/10-2.webp" >
							</figure>
							<article>
								<h3 id="id-three">坚果 R2 足迹系列保护套 正电子的发现者出生</h3>
								<h5>为了那些改变人类足迹的进程</h5>
							</article>
							<article id="small-one-price"><span>￥59.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/10-3.webp" >
							</figure>
							<article>
								<h3 id="id-three">足迹保护套 克里斯蒂安·多普勒出生 for iPhone 11</h3>
								<h5>公益宝贝</h5>
							</article>
							<article id="small-one-price"><span>￥69.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/10-4.webp" >
							</figure>
							<article>
								<h3 id="id-three">足迹保护套 莱卡成为第一只进入地球轨道的动物 for iPhone 11</h3>
								<h5>公益宝贝</h5>
							</article>
							<article id="small-one-price"><span>￥59.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/10-5.webp" >
							</figure>
							<article>
								<h3 id="id-three">坚果 R2 足迹系列保护套 联合国通过《儿童权利宣言》</h3>
								<h5>为了那些改变人类足迹的进程</h5>
							</article>
							<article id="small-one-price"><span>￥59.00</span></article>
						</section>
						<section id="section-small-one">
							<figure >
								<img src="../img/10-6.webp" >
							</figure>
							<article>
								<h3 id="id-three">足迹保护套 人类首次公开使用乙醚 for iPhone 11</h3>
								<h5>公益宝贝</h5>
							</article>
							<article id="small-one-price"><span>￥59.00</span></article>
						</section>
					</aside>
				</div>
			</div>
			<div id="section-big-seven">
				<header>
					<h5>论坛精选</h5>
					<a href="http://bbs.smartisan.com/forum.php" id="right-operation">
						<button id="floor-btn">
							前往论坛
							<i>></i>
						</button>
					</a>
				</header>
				<aside id="common-flex-box">
					<article id="common-one">
						<figure>
							<img src="../img/11-1.webp">
						</figure>
							<h3 id="id-three">Smartisan OS v8.0.1 更新日志（坚果 R2）</h3>
							<p id="desc">Smartisan OS v8.0.1 已于 10 月 20 日推送给坚果 R2 用户。</p>
							<p id="read">阅读全文 ></p>
						
					</article>
					<article id="common-one">
						<figure>
							<img src="../img/11-2.webp">
						</figure>
							<h3 id="id-three">坚果 R2 购买及使用常见问题</h3>
							<p id="desc">你关心的各种问题~</p>
							<p id="read">阅读全文 ></p>
						
					</article>
					<article id="common-one">
						<figure>
							<img src="../img/11-3.webp">
						</figure>
							<h3 id="id-three">R2体验新鲜出炉，上手两小时体验（持续更新）</h3>
							<p id="desc">新鲜出炉上手体验</p>
							<p id="read">阅读全文 ></p>
						
					</article>
					<article id="common-one">
						<figure>
							<img src="../img/11-4.webp">
						</figure>
							<h3 id="id-three">我的Smartisan手机</h3>
							<p id="desc">祝新品大卖。</p>
							<p id="read">阅读全文 ></p>
						
					</article>
				</aside>
			</div>
		</section>
		<footer>
			<div id="foot-center">
				<div id="footer-menu">
					<ul>
						<li>
							<h3>订单服务</h3>
							<div id="item-name">
								<a href="">购买指南</a>
								<a href="">送货政策</a>
							</div>
						</li>
						<li>
							<h3>服务支持</h3>
							<div id="item-name">
								<a href="">自助服务</a>
								<a href="">维修门店</a>
							</div>
						</li>
						<li>
							<h3>媒体中心</h3>
							<div id="item-name">
								<a href="">新闻动态</a>
								<a href="">官方视频</a>
								<a href="">图片资源</a>
							</div>
						</li>
						<li>
							<h3>关注我们</h3>
							<div id="item-name">
								<a href="">新浪微博</a>
								<a href="">官方微信</a>
								<a href="">荣誉奖项</a>
							</div>
						</li>
					</ul>
				<div id="footer-service">
					<h1 id="tel">400 - 603 - 5000</h1>
					<h2 id="time">周一到周日 9:00 - 18:00</h2>
					<h2 id="desc">(仅收市话费)</h2>
					<div id="online">
						<a href="//www.smartisan.com/support/#/self-service" id="online-btn">
							<span>在线帮助</span>
						</a>
					</div>
				</div>
				</div>
				<div id="footer-info">
					<ul>
						<li id="footer-first-li">Copyright © 2020 smartisan.com 版权所有</li>
						<li><a href="">锤子商城隐私政策</a></li>
						<li><a href="">锤子商城用户协议</a></li>
						<li><a href="">资质证照</a></li>
					</ul>
					<ul>
						<li><a href="">京 ICP 备 19048576 号 - 1</a></li>
						<li><a href=""><img src="//static.smartisanos.cn/indexnew/img/icon-public-security.d0289dc0.png"></a></li>
						<li><a href="">京公网安备 11010802033469号</a></li>
						<li><a href="">京食药网食备 202010031</a></li>
					</ul>
				</div>
			</div>
		</footer>
	</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../js/homepage-select.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/next-tv.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/homepage-php.js"></script>
<script>
	$(function(){
		getData();
	})
	function getData(){
		$.get('http://localhost/project/goodsAndShoppingCart/getGoodsList.php',{"typeId":"001"},function(data){
			console.log(JSON.parse(data));
			let arr = JSON.parse(data);
			let str = '';
			arr.forEach((item,index)=>{
				str +=`<section id="section-small-one" goodsid = "${item.goodsId}">
						<figure>
							<img src="${item.goodsImg}"/>
						</figure>
						<article>
							<h3 id="id-three">${item.goodsName}</h3>
							<h5>${item.goodsDesc}</h5>
						</article>
						<article id="small-one-price"><span>${item.goodsPrice}</span></article>
					</section>`
			})
			$('#section-two-box').html(str);
		})
	}
	$('#section-two-box').on('click','section',function(e){
		if(e.target.nodeName == 'SECTION'){
			console.log(e.target.getAttribute('goodsid'));
			let id = e.target.getAttribute('goodsid');
			location.href = './details.html?goodsId='+ id;
		}
	})
	// $('#section-two-box').on('click','img',function(e){
	// 	if(e.target.nodeName == 'IMG'){
	// 		console.log(e.target.getAttribute('imgsid'));
	// 		let id = e.target.getAttribute('imgsid');
	// 		location.href = './details.html?imgsid='+ id;
	// 	}
	// })


	$(function(){
		getDeta();
	})
	function getDeta(){
		$.get('http://localhost/project/goodsAndShoppingCart/getGoodsList.php',{"typeId":"001"},function(data){
			console.log(JSON.parse(data));
			let arr = JSON.parse(data);
			let str = '';
			arr.forEach((item,index)=>{
				str +=`<section id="section-small-one" goodsid = "${item.goodsId}">
						<figure>
							<img src="${item.goodsImg}"/>
						</figure>
						<article>
							<h3 id="id-three">${item.goodsName}</h3>
							<h5>${item.goodsDesc}</h5>
						</article>
						<article id="small-one-price"><span>${item.goodsPrice}</span></article>
					</section>`
			})
			$('#section-two-box').html(str);
		})
	}
	$('#section-equal').on('click','section',function(e){
		if(e.target.nodeName == 'SECTION'){
			console.log(e.target.getAttribute('goodsid'));
			let id = e.target.getAttribute('goodsid');
			location.href = './details.html?goodsId='+ id;
		}
	})
	// $('#section-equal').on('click','img',function(e){
	// 	if(e.target.nodeName == 'IMG'){
	// 		console.log(e.target.getAttribute('imgsid'));
	// 		let id = e.target.getAttribute('imgsid');
	// 		location.href = './details.html?imgsid='+ id;
	// 	}
	// })

	$(function(){
		getDeta();
	})
	function getDeta(){
		$.get('http://localhost/project/goodsAndShoppingCart/getGoodsList.php',{"typeId":"001"},function(data){
			console.log(JSON.parse(data));
			let arr = JSON.parse(data);
			let str = '';
			arr.forEach((item,index)=>{
				str +=`<section id="section-small-one" goodsid = "${item.goodsId}">
						<figure>
							<img src="${item.goodsImg}"/>
						</figure>
						<article>
							<h3 id="id-three">${item.goodsName}</h3>
							<h5>${item.goodsDesc}</h5>
						</article>
						<article id="small-one-price"><span>${item.goodsPrice}</span></article>
					</section>`
			})
			$('#section-two-box').html(str);
		})
	}
	$('#section-equal').on('click','section',function(e){
		if(e.target.nodeName == 'SECTION'){
			console.log(e.target.getAttribute('goodsid'));
			let id = e.target.getAttribute('goodsid');
			location.href = './details.html?goodsId='+ id;
		}
	})
	$('#section-equal').on('click','img',function(e){
		if(e.target.nodeName == 'IMG'){
			console.log(e.target.getAttribute('imgsid'));
			let id = e.target.getAttribute('imgsid');
			location.href = './details.html?imgsid='+ id;
		}
	})
	
</script>